<template>
  <div class='Navigation'>
    <div>页面导航</div>
    <a
      v-show='item.title'
      v-for='item in routes'
      :class='{"active": hrefUrl.indexOf(item.path)>0}'
      :href="`/#${item.path}`">{{item.title}}</a>
  </div>
</template>


<script setup lang="ts">
import {ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const hrefUrl = ref(location.href)

const routes = router.options.routes

console.log(location.href)

console.log('router', router.options.routes)
</script>


<style lang="stylus">
.Navigation{
  text-align: right;
  div{
    padding:0 10px
    font-size:18px
  }
  a{
    margin: 0 10px
    display: inline-block;
    color: #109b8a
    text-decoration: none;

    &.active{
      font-weight: bold;
      border-bottom: 1px dashed #109b8a

      text-decoration: underline;
    }
  }
}
</style>
